<template>
	<view class="allBox">
		<view class="lineALL" style="height: 5vw;"></view>
		<view class="isMoneyBox">
			<view class="isMoneyCardBox">
				<view class="itemboxall">
					<view class="jinEBox">
						<view class="MoneyWord">提现金额</view>
						<view class="MoneyIndex">(满100元可提现，单笔最大提现金额10000元)</view>
					</view>
					<input placeholder="请输入提现金额" type="text" class="centered-input">
					<view class="lineBox"></view>
					<view class="isMoneyAllBox">
						<view class="isOkMoney">
							<view class="">可提现金额</view>
							<view class="">￥{{isMoney}}</view>
						</view>
						<view class="isMoneyIndex">全部提现</view>
					</view>
				</view>
				
			</view>
			<view class="isCardFrom">
				<view class="isCardFromItem">
					<view class="isNameCard">
						<view class="isIndex">姓名</view>
						<input class="isNameInput" type="text" name="" placeholder="请输入真实姓名">
					</view>
					<view class="linebox"></view>
					<view class="isNameCard">
						<view class="isIndex">手机号</view>
						<input class="isNameInput" type="text" name="" placeholder="请输入手机号">
					</view>
				</view>
			</view>
		</view>
		<view class="isbackMoney">
			<view class="isMakeMoney">提现</view>
		</view>
		
	</view>
	
</template>

<script setup>
	import { ref } from 'vue';
const isMoney = ref(53.80)
</script>

<style scoped>
	.isbackMoney{
		width: 100vw;
		height: 166rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
	}
	.linebox{
		    background-color: rgb(219, 219, 219);
		    width: 82vw;
		    left: 9vw;
		    right: 0px;
		    height: 1rpx;
		    display: flex;
		
	}
	.isMakeMoney{
		margin: 15rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 686rpx;
		height: 84rpx;
		opacity: 1;
		background: rgba(0, 0, 0, 1);
		color: white;
	}
	.isNameInput{
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 38.42rpx;
		color: rgba(153, 153, 153, 1);
	}
	.isNameCard{
		justify-content: space-between;
		width: 70%;
		height: 50%;
		display: flex;
		align-items: center;
	}
	.isIndex{
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 38.42rpx;
		color: rgba(51, 51, 51, 1);
	}
	.isMoneyIndex{
		font-size: 24rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 32.92rpx;
color: rgba(236, 24, 24, 1);
	}
	.isCardFromItem{
		height: 95%;
		width: 95%;
		display: flex;
		flex-direction: column;
	}
	.isMoneyAllBox{
margin-top: 32rpx;
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
	.isCardFrom{
		margin: 15rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 686rpx;
		height: 240rpx;
		background-color: white;
	}
.allBox{
	width: 100vw;
	height: 100vh;
	background-color: rgb(245,245,245);
}
.isOkMoney{
	display: flex;
	align-items: center;
	font-size: 24rpx;
	font-weight: 400;
	letter-spacing: 0rpx;
	line-height: 32.92rpx;
	color: rgba(102, 102, 102, 1);
}
.isMoneyBox{
	width: 95vw;
	margin: 0 auto;
}
.lineBox{
	margin-top: 50rpx;
	width: 100%;
	height: 1rpx;
	background-color: rgba(238, 238, 238, 1);;
}
.centered-input {
	 font-size: 42rpx; /* 增大 placeholder 的字体大小 */
	margin-top: 64rpx;
    text-align: center; /* 文本水平居中 */
}
    .centered-input::placeholder {
        font-size: 42rpx; /* 增大 placeholder 的字体大小 */
        color: #999; /* 可选：设置 placeholder 文本颜色 */
    }
.MoneyWord{
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0rpx;
	line-height: 38.42rpx;
	color: rgba(51, 51, 51, 1);
}
.itemboxall{
	display: flex;
	flex-direction: column;
	width: 95%;
	height: 95%;
	margin: 0 auto;
}
.MoneyIndex{
	margin-left: 15rpx;
	font-size: 22rpx;
	font-weight: 400;
	letter-spacing: 0rpx;
	line-height: 30.18rpx;
	color: rgba(153, 153, 153, 1);
}
.jinEBox{
	align-items: center;
	display: flex;
}
.isMoneyCardBox{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 686rpx;
	height: 300rpx;
	background-color: white;
}
</style>
